<template>
	<view 
		class="brand-card" 
		:class="[
			`card-${variant}`,
			`card-${size}`,
			{ 'card-hoverable': hoverable },
			{ 'card-bordered': bordered }
		]"
		@tap="handleClick"
	>
		<!-- 卡片头部 -->
		<view v-if="$slots.header || title" class="card-header">
			<slot name="header">
				<view class="header-content">
					<text v-if="title" class="card-title">{{ title }}</text>
					<text v-if="subtitle" class="card-subtitle">{{ subtitle }}</text>
				</view>
			</slot>
		</view>

		<!-- 卡片内容 -->
		<view class="card-body">
			<slot></slot>
		</view>

		<!-- 卡片底部 -->
		<view v-if="$slots.footer" class="card-footer">
			<slot name="footer"></slot>
		</view>

		<!-- 状态指示器 -->
		<view v-if="status" class="status-indicator" :class="`status-${status}`"></view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 定义属性
const props = defineProps({
	// 卡片标题
	title: {
		type: String,
		default: ''
	},
	// 卡片副标题
	subtitle: {
		type: String,
		default: ''
	},
	// 卡片变体
	variant: {
		type: String,
		default: 'default',
		validator: (value) => {
			return ['default', 'primary', 'secondary', 'success', 'warning', 'error', 'gradient'].includes(value)
		}
	},
	// 卡片尺寸
	size: {
		type: String,
		default: 'medium',
		validator: (value) => {
			return ['small', 'medium', 'large'].includes(value)
		}
	},
	// 是否可悬停
	hoverable: {
		type: Boolean,
		default: false
	},
	// 是否显示边框
	bordered: {
		type: Boolean,
		default: false
	},
	// 状态指示
	status: {
		type: String,
		default: '',
		validator: (value) => {
			return ['', 'success', 'warning', 'error', 'processing'].includes(value)
		}
	}
})

// 定义事件
const emit = defineEmits(['click'])

// 处理点击事件
const handleClick = () => {
	emit('click')
}
</script>

<style lang="scss" scoped>

.brand-card {
	background: $bg-primary;
	border-radius: 20rpx;
	position: relative;
	overflow: hidden;
	transition: $transition-normal;

	// 卡片变体样式
	&.card-default {
		box-shadow: $shadow-light;
	}

	&.card-primary {
		background: $brand-primary;
		color: $text-inverse;
		box-shadow: $shadow-medium;

		.card-title {
			color: $text-inverse;
		}

		.card-subtitle {
			color: rgba(255, 255, 255, 0.8);
		}
	}

	&.card-secondary {
		background: $brand-secondary;
		color: $text-inverse;
		box-shadow: $shadow-medium;

		.card-title {
			color: $text-inverse;
		}

		.card-subtitle {
			color: rgba(255, 255, 255, 0.8);
		}
	}

	&.card-success {
		background: $success-bg;
		border-left: 6rpx solid $success-color;

		.card-title {
			color: $success-color;
		}
	}

	&.card-warning {
		background: $warning-bg;
		border-left: 6rpx solid $warning-color;

		.card-title {
			color: $warning-color;
		}
	}

	&.card-error {
		background: $error-bg;
		border-left: 6rpx solid $error-color;

		.card-title {
			color: $error-color;
		}
	}

	&.card-gradient {
		background: $brand-gradient-main;
		color: $text-inverse;
		box-shadow: $shadow-heavy;

		.card-title {
			color: $text-inverse;
		}

		.card-subtitle {
			color: rgba(255, 255, 255, 0.9);
		}
	}

	// 卡片尺寸
	&.card-small {
		padding: 20rpx;
		border-radius: 15rpx;

		.card-title {
			font-size: 28rpx;
		}

		.card-subtitle {
			font-size: 22rpx;
		}
	}

	&.card-medium {
		padding: 30rpx;
		border-radius: 20rpx;

		.card-title {
			font-size: 32rpx;
		}

		.card-subtitle {
			font-size: 26rpx;
		}
	}

	&.card-large {
		padding: 40rpx;
		border-radius: 25rpx;

		.card-title {
			font-size: 36rpx;
		}

		.card-subtitle {
			font-size: 28rpx;
		}
	}

	// 可悬停效果
	&.card-hoverable {
		cursor: pointer;

		&:active {
			transform: translateY(2rpx);
			box-shadow: $shadow-light;
		}
	}

	// 边框样式
	&.card-bordered {
		border: 2rpx solid $border-light;
	}

	// 卡片头部
	.card-header {
		margin-bottom: 20rpx;

		.header-content {
			.card-title {
				font-weight: bold;
				color: $text-primary;
				display: block;
				margin-bottom: 8rpx;
			}

			.card-subtitle {
				color: $text-secondary;
				display: block;
				line-height: 1.4;
			}
		}
	}

	// 卡片内容
	.card-body {
		color: $text-secondary;
		line-height: 1.5;
	}

	// 卡片底部
	.card-footer {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid $border-light;
	}

	// 状态指示器
	.status-indicator {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;

		&.status-success {
			background: $success-color;
			box-shadow: 0 0 0 4rpx $success-bg;
		}

		&.status-warning {
			background: $warning-color;
			box-shadow: 0 0 0 4rpx $warning-bg;
		}

		&.status-error {
			background: $error-color;
			box-shadow: 0 0 0 4rpx $error-bg;
		}

		&.status-processing {
			background: $info-color;
			box-shadow: 0 0 0 4rpx $info-bg;
			animation: pulse 2s infinite;
		}
	}
}

// 脉冲动画
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4);
	}
	70% {
		box-shadow: 0 0 0 20rpx rgba(52, 152, 219, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
	}
}
</style>